{% extends 'base_dashboard.html' %}

{% block title %}Start exam — {{ course.title }}{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-6">
    <div class="card border-0 shadow-sm rounded-4 p-4 text-center">
      <div class="display-6 text-success mb-2"><i class="bi bi-shield-check"></i></div>
      <h4 class="fw-bold">Ready to take the exam</h4>
      <p class="text-muted">{{ course.title }}</p>
      <ul class="list-unstyled small text-muted text-start mx-auto" style="max-width:24rem;">
        <li class="mb-1">• {{ course.question_count_per_attempt }} MCQs from the verified question bank</li>
        <li class="mb-1">• Pass mark <strong>{{ course.pass_percentage }}%</strong></li>
        <li class="mb-1">• Timed: <strong>{{ course.duration_minutes }} minutes</strong></li>
        <li class="mb-1">• One question at a time in a <strong>dedicated exam window</strong></li>
        <li class="mb-1">• Practice question first (not scored), then full screen + timer</li>
        <li class="mb-1">• Tab switches are logged; after <strong>3</strong> the attempt is <strong>flagged for review</strong> (not auto-failed)</li>
        <li class="mb-1">• Results include a topic-wise breakdown even if you do not pass</li>
      </ul>
      <form method="post" class="mt-3">
        {% csrf_token %}
        <button class="btn btn-success btn-lg w-100 fw-semibold"
                onclick="return confirm('Open the secure exam session?');">
          Open secure exam session
        </button>
      </form>
      <a href="{% url 'courses:course_detail' slug=course.slug %}" class="btn btn-link mt-2">Cancel</a>
    </div>
  </div>
</div>
{% endblock %}